<template>
	<view class="zone">
		<Header title="排行榜"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<view class="stabs">
				<view class="tabs">
					<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
						@click="tabchange(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>

			<view class="box">

				<view class="type">
					<text class="n1">排名</text>
					<text class="n2">玩家信息</text>
					<text class="n3" v-if="stat==2">团队好友</text>
				</view>

				<scroll-view scroll-y class="scrolllist">

					<view class="list">
						<view class="item" v-for="(item,index) in datalist[stat]" :key="index">
							<view class="flex">
								<view class="lv">
									<image v-if="index < 3"
										:src="index == 0?'http://image.qxgm.site/tdz/img/rank/rank1.png':index == 1?'http://image.qxgm.site/tdz/img/rank/rank2.png':'http://image.qxgm.site/tdz/img/rank/rank3.png'"
										mode="widthFix" />

									<text v-else>{{index+1}}</text>
								</view>
								<view class="header">
									<image
										:src="item.avatar? item.avatar :'http://image.qxgm.site/tdz/img/public/mg-header.png'"
										mode="widthFix" />
								</view>
								<view class="worf" @click="linkwold(item)">
									<text class="phone">{{!!item.username?item.username:'天道新人'}}</text>
									<text class="vode">ID:{{item.invite_code}}</text>
									<view class="linkbtn">联系ta</view>
								</view>
							</view>
							<view class="center" v-show="stat == 1">
								<text class="lve">{{item.grade_name}}{{item.grade_level}}</text>
								<view class="zhan">
									战力{{item.all_fight}}
								</view>
							</view>
							<view class="center" v-show="stat == 2">
								<text class="haoyou">{{item.friends_num}}</text>
							</view>
						</view>
						<view class="empty" v-if="datalist[stat].length==0">
							<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
							暂无数据
						</view>
					</view>

				</scroll-view>


			</view>
		</view>

		<!-- 联系ta -->
		<u-mask :show="contact">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>联系ta</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">

							<view class="spart">
								<text>微信</text>
								<view class="slink">
									<input type="text" v-model="weixin" disabled />
									<view class="scopy" @click="$p.copy(weixin)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ</text>
								<view class="slink">
									<input type="text" v-model="qq" disabled />
									<view class="scopy" @click="$p.copy(qq)">
										复制
									</view>
								</view>
							</view>
							<view class="spart">
								<text>QQ群</text>
								<view class="slink">
									<input type="text" v-model="qq_group" disabled />
									<view class="scopy" @click="$p.copy(qq_group)">
										复制
									</view>
								</view>
							</view>

						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="contact=false">确认</u-button>
					</view>
				</view>
				<image class="m_close" @click="contact = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat: 1, //tab状态
				tablist: [{
						id: 1,
						name: '战力排行榜',
						isrequist: false,
					},
					{
						id: 2,
						name: '团队排行榜',
						isrequist: false,
					},
				],
				list: '', //使用的列表
				datalist: {
					1: [],
					2: [],
					3: [],
				}, //用来保存数据
				contact: false,
				weixin: '暂未设置',
				qq: '暂未设置',
				qq_group: '暂未设置',
			}
		},
		onShow() {
			this.rankList(this.stat);
		},
		onLoad() {},
		methods: {
			// 切换
			tabchange(id) {
				this.stat = id
				// 节流
				if (!this.tablist[id - 1].isrequist) {
					this.rankList(id)
				}
			},
			// 请求排行榜列表
			async rankList() {
				if (this.stat == 1) {
					let res = await this.$http.index.rankfight()
					if (res.code == 1) {
						this.tablist[this.stat - 1].isrequist = true
						this.datalist[this.stat] = res.data
					}
				} else {
					let res = await this.$http.index.rankgroup()
					if (res.code == 1) {
						this.tablist[this.stat - 1].isrequist = true
						this.datalist[this.stat] = res.data
					}
				}

			},
			// 联系ta
			linkwold(item) {
				this.weixin = item.wechat_num == null ? '暂未设置' : item.wechat_num
				this.qq = item.qq_num == null ? '暂未设置' : item.qq_num
				this.qq_group = item.qq_group_num == null ? '暂未设置' : item.qq_group_num
				this.contact = true
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		width: 44%;
	}

	.box {

		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.scrolllist {
		height: calc(100vh - 227px);
		overflow-y: scroll;
	}

	.tabs {
		width: 86%;
		padding: 8px 16px;
		display: flex;
		align-items: center;
		background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
		background-size: 100% 100%;

		.tab {
			width: 33%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
			margin-right: 5px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.type {
		display: flex;
		align-items: center;
		background: #e2c8d0;
		font-size: 14px;
		color: #333;
		line-height: 36px;
		background: url(http://image.qxgm.site/tdz/img/rank/mg-11.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 3px;

		.n1 {
			display: inline-block;
			width: 20%;
			text-align: center;
		}

		.n2 {
			margin-left: 10%;
		}

		.n3 {
			display: inline-block;
			margin-left: 30%;
		}
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		padding: 9px 5px;
		box-sizing: border-box;
		margin: 3px;
	}

	.flex {
		width: 50%;
		display: flex;
		align-content: center;

		.lv {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 33px;
			}

			text {
				display: inline-block;
				width: 33px;
				font-size: 15px;
				font-weight: 500;
				text-align: center;
			}

		}
	}

	.haoyou {
		font-size: 15px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 24px;
	}

	.header {
		width: 45px;
		margin-left: 6px;
		margin-right: 6px;

		image {
			width: 100%;
			border-radius: 50%;
		}
	}

	.worf {
		position: relative;
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 13px;

		.phone {
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*文本超出三点代替*/
			margin-bottom: 5px;
		}
	}

	.center {
		width: 30%;
		text-align: center;
	}

	.lve {
		font-size: 12px;
		font-weight: normal;
		color: #B76A6C;
		line-height: 12px;
		margin-bottom: 5px;
	}

	.zhan {
		width: 100%;
		font-size: 14px;
		font-weight: normal;
		color: #FF3333;
		line-height: 18px;
		background: rgba(182, 111, 113, 0.3);
		border-radius: 10px;
	}

	.linkbtn {
		position: absolute;
		bottom: 3px;
		right: -25px;
		width: 45px;
		height: 20px;
		font-size: 12px;
		font-weight: normal;
		color: #fdf2c5;
		text-align: center;
		line-height: 20px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
	}


	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.jihuop {
		padding: 0 9%;
	}

	.spart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;

		text {
			width: 22%;
		}
	}

	.slink {
		width: 78%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #bcb8ba;
		padding: 0 6px 0 19px;
		height: 40px;

		input {
			font-size: 15px;
			font-weight: normal;
			color: #50433A;
			line-height: 24px;
		}

		.scopy {
			width: 49px;
			height: 28px;
			display: block;
			font-size: 12px;
			text-align: center;
			font-weight: normal;
			color: #f9e5b6;
			line-height: 28px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>